import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta
  title="Doc for developers/HTML Structure"
/>

# Global HTML structure

```html
<body>
  <header id="main-header">
    <a href="#main-content" class="skip-to-content">Skip to main content</a>
    <div class="top-bar" />
    <div class="top-header" />
    <div class="desktop-menu" />
    <div class="mobile-menu" />
    <div class="breadcrumb" />
  </header>
  <main id="main-content">
    <section class="container">
      <!-- content with max width here -->
    </section>
    <section>
      <!-- full width content here -->
    </section>
  </main>
  <footer id="main-footer">
    <div class="container">
      <!-- footer content here -->
    </div>
  </footer>
</body>
```

# Navigations overview

Let's have a closer look at the main header:

```html
<header id="main-header">
  <a href="#main-content" class="skip-to-content">Skip to main content</a>
  <div class="top-bar" />
  <div class="top-header" />
  <div class="desktop-menu" />
  <div class="mobile-menu" />
  <div class="breadcrumb" />
</header>
```

The `.skip-to-content` is a hidden link appearing only when `TAB` key is hit. It helps to reach faster the content during keyboard navigation.

The three next blocks contain each a navigation in the desktop context:

- `.top-bar` contains the `.top-bar-navigation`
- `.top-header` contains the `.meta-navigation`
- `.desktop-menu` contains the `.main-navigation`

In a mobile context though, these three navigations are all regrouped in the `.mobile-menu` container.

Regarding the implementation approach, the content of the navigations may be duplicated in the `.mobile-menu` container. A better approach would be to swap their positions between the mobile-menu and their desktop containers.

Below a schema to explain how these navigations are displayed in the header depending on the context:


import imageFile from '../../../static/images/html-structure.png';

<img src={imageFile} />

# Main navigation tree

As we can see above, the main The `<MainNavigation />` is injected in two separate places, but it's html structure remains the same:

```html
<nav aria-label="Main" class="main-navigation">
  <ul>
    <!-- list of <li> -->
  </ul>
</nav>
```

Inside this navigation, `<li>` elements can have two aspects, regarding if they have children or not:

```html
<li>
  <a href="#">
    Menu item without children
  </a>
</li>
```
or

```html
<li>
  <a role="button" class="navy__has-children">
    <span>Menu item with children</span>
    <svg class="icon icon--lg" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="#ArrowRight" />
    </svg>
  </a>
  <ul>
    <li>
      <a role="button" class="navy__back">
        <svg class="icon icon--lg" aria-hidden="true" focusable="false" role="img">
          <use xlink:href="#ArrowLeft" />
        </svg>
        <span>Back</span>
      </a>
      <span class="navy__title">Menu item with children</span>
      <a href="#">Overview</a>
    </li>
    <!-- list of <li> children here -->
    <!-- reuse the same pattern recursively if child element has children too -->
  </ul>
</li>
```

